{% extends "blogs/base.html" %}

{% block page_header %}
  <div style="display: flex; align-items: center;">
    <h3 style="display: inline-block; margin: 0 10px 0 0;"> <b>Blogs</b> </h3>
    <a href ="{% url 'blogs:new_blog' %}" style="background-color: #d4edda; 
      padding: 5px 10px; border-radius: 5px; margin-left: 10px; margin-top: 5px;">
      Add a new blog
    </a>
  </div>
{% endblock page_header %}

{% block content %}

<ul>
    {% for blog in blogs %}

    <li>
        <p><a href ="{% url 'blogs:blog' blog.id %}"> <b>{{ blog }}</b> </a>-- 
            updated on: {{ blog.date_updated }}
        </p>
    </li>
    {% empty %}
    <li>No blog have been added yet.</li>

    {% endfor %}
</ul>

{% endblock %}